<template>
  <!-- 合并FBA货件单-->
  <a-modal :width="800" v-model:visible="showMergeDialog" title="合并发货单" title-align="start" ok-text="确认合并" :mask-closable="false" :ok-loading="submitLoading" @cancel="closedDialog" :on-before-ok="submitAudit">
    <p style="margin-bottom: 10px">以下发货单，相同店铺可以合并到一起发货</p>
    <a-radio-group v-model="mainId">
      <a-table class="table-two-line" ref="tableRef" :loading="tableLoading" :bordered="false" :data="tableList" :scroll="{ y: 'calc(84vh - 200px)' }" size="mini" :pagination="false">
        <template #columns>
          <a-table-column data-index="shopName" title="店铺" />
          <a-table-column title="发货单号" :width="100">
            <template #cell="{ record }">
              <p class="highlight">{{ record.billNo }}</p>
            </template>
          </a-table-column>
          <a-table-column title="发货仓">
            <template #cell="{ record }">
              <p>{{ record.warehouseName }}</p>
            </template>
          </a-table-column>
          <a-table-column title="发货地址">
            <template #cell="{ record }">
              <TextLimit>{{ getAddress(record.shipFromAddress) }}</TextLimit>
            </template>
          </a-table-column>
          <a-table-column title="计划数" :width="100">
            <template #cell="{ record }">
              <a-popover title="发货单明细" trigger="click" position="bottom">
                <p class="highlight cursor">{{ record.realNum }}<icon-down style="margin-left: 10px" /></p>
                <template #content>
                  <FbaItems size="mini" :list="record.skuDetails" />
                </template>
              </a-popover>
            </template>
          </a-table-column>
          <a-table-column title="设为主单" :width="80">
            <template #cell="{ record }">
              <a-radio :value="record.id" />
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-radio-group>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import FbaItems from './fbaItems.vue'
  import { findFbaShipmentListByMerge, mergeFbaShipmentBySale } from '@/api/purchase'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    currentData: {
      type: Object,
      default: () => {},
    },
  })
  onMounted(() => {
    getMergeList()
  })

  const showMergeDialog = ref(props.isShow)
  const mainId = ref()
  const submitLoading = ref(false)
  const tableLoading = ref(false)
  const tableList = ref<Array<any>>([])

  // 获取可合并产品列表
  async function getMergeList() {
    tableLoading.value = true
    const res: any = await findFbaShipmentListByMerge({
      shopId: props.currentData?.shopId,
      warehouseCode: props.currentData?.warehouseCode,
    })
    tableLoading.value = false
    tableList.value = res?.data || []
  }
  // 显示地址
  function getAddress(address: any) {
    return `${address?.countryCode || ''}${address?.stateOrProvinceCode || ''}${address?.city || ''}${address?.addressLine1 || ''}`
  }

  // 选择产品
  async function submitAudit() {
    if (!mainId.value) {
      Message.error('请设置主单')
      return false
    }
    const res: any = await mergeFbaShipmentBySale({
      id: mainId.value,
      ids: tableList.value.map((el: any) => el.id),
    })
    if (!res) return false
    Message.success('合并成功')
    emit('success')
    emit('closed')
  }
  // 关闭
  function closedDialog() {
    showMergeDialog.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped></style>
